/* margin */
.m0 {
    margin: 0;
}

.ml1 {
    margin-left: 1px;
}

.ml2 {
    margin-left: 2px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml30 {
    margin-left: 30px;
}

.mr1 {
    margin-right: 1px;
}

.mr2 {
    margin-right: 2px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.mr30 {
    margin-right: 30px;
}

.mt1 {
    margin-top: 1px;
}

.mt2 {
    margin-top: 2px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mb1 {
    margin-bottom: 1px;
}

.mb2 {
    margin-bottom: 2px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb6 {
    margin-bottom: 6px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

/* margin negative */
.ml-1 {
    margin-left: -1px;
}

.mr-1 {
    margin-right: -1px;
}

.mt-1 {
    margin-top: -1px;
}

.mb-1 {
    margin-bottom: -1px;
}

.ml-3 {
    margin-left: -3px;
}

.mr-3 {
    margin-right: -3px;
}

.mt-3 {
    margin-top: -3px;
}

.mb-3 {
    margin-bottom: -3px;
}

.ml-20 {
    margin-left: -20px;
}

.mr-20 {
    margin-right: -20px;
}

.mt-20 {
    margin-top: -20px;
}

.mb-20 {
    margin-bottom: -20px;
}

/* padding */
.p0 {
    padding: 0;
}

.p1 {
    padding: 1px;
}

.pl1 {
    padding-left: 1px;
}

.pt1 {
    padding-top: 1px;
}

.pr1 {
    padding-right: 1px;
}

.pb1 {
    padding-bottom: 1px;
}

.p2 {
    padding: 2px;
}

.pl2 {
    padding-left: 2px;
}

.pt2 {
    padding-top: 2px;
}

.pr2 {
    padding-right: 2px;
}

.pb2 {
    padding-bottom: 2px;
}

.pl5 {
    padding-left: 5px;
}

.p5 {
    padding: 5px;
}

.pt5 {
    padding-top: 5px;
}

.pr5 {
    padding-right: 5px;
}

.pb5 {
    padding-bottom: 5px;
}

.p10 {
    padding: 10px;
}

.pl10 {
    padding-left: 10px;
}

.pt10 {
    padding-top: 10px;
}

.pr10 {
    padding-right: 10px;
}

.pb10 {
    padding-bottom: 10px;
}

.p15 {
    padding: 15px;
}

.pl15 {
    padding-left: 15px;
}

.pt15 {
    padding-top: 15px;
}

.pr15 {
    padding-right: 15px;
}

.pb15 {
    padding-bottom: 15px;
}

.p20 {
    padding: 20px;
}

.pl20 {
    padding-left: 20px;
}

.pt20 {
    padding-top: 20px;
}

.pr20 {
    padding-right: 20px;
}

.pb20 {
    padding-bottom: 20px;
}

.p30 {
    padding: 30px;
}

.pl30 {
    padding-left: 30px;
}

.pl60 {
    padding-left: 60px;
}

.pt30 {
    padding-top: 30px;
}

.pr30 {
    padding-right: 30px;
}

.pb30 {
    padding-bottom: 30px;
}

.p_02 {
    padding: 0 2%;
}

.p_2 {
    padding: 2%;
}

/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/
.bdc {
    border: 1px solid #ccc;
}

.blc {
    border-left: 1px solid #ccc;
}

.brc {
    border-right: 1px solid #ccc;
}

.btc {
    border-top: 1px solid #ccc;
}

.bbc {
    border-bottom: 1px solid #ccc;
}

.bdd {
    border: 1px solid #ddd;
}

.bld {
    border-left: 1px solid #ddd;
}

.brd {
    border-right: 1px solid #ddd;
}

.btd {
    border-top: 1px solid #ddd;
}

.bbd {
    border-bottom: 1px solid #ddd;
}

.bde {
    border: 1px solid #eee;
}

.ble {
    border-left: 1px solid #eee;
}

.bre {
    border-right: 1px solid #eee;
}

.bte {
    border-top: 1px solid #eee;
}

.bbe {
    border-bottom: 1px solid #eee;
}

.bdod {
    border-bottom: dotted 1px #ddd;
}

/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */
.bgwh {
    background-color: #fff;
}

.bgfb {
    background-color: #fbfbfb;
}

.bgf5 {
    background-color: #f5f5f5;
}

.bgf0 {
    background-color: #f0f0f0;
}

.bgeb {
    background-color: #ebebeb;
}

.bge0 {
    background-color: #e0e0e0;
}

.bge04 {
    background-color: #ffe037;
}

/* safe color */
.g0 {
    color: #000;
}

.g3 {
    color: #333;
}

.g6 {
    color: #666;
}

.g9 {
    color: #999;
}

.gc {
    color: #ccc;
}

.wh {
    color: white;
}

.gr {
    color: red;
}

.ge04 {
    color: #f2b300;
}

/* display */
.dn {
    display: none;
}

.di {
    display: inline;
}

.db {
    display: block;
}

.dib {
    display: inline-block;
}

/* if the element is block level(eg. div, li), using 'inline_any' instead */

/* percent width value */
.pct10 {
    width: 10%;
}

.pct15 {
    width: 15%;
}

.pct20 {
    width: 20%;
}

.pct25 {
    width: 25%;
}

.pct30 {
    width: 30%;
}

.pct33 {
    width: 33.3%;
}

.pct40 {
    width: 40%;
}

.pct50 {
    width: 50%;
}

.pct60 {
    width: 60%;
}

.pct66 {
    width: 66.6%;
}

.pct70 {
    width: 70%;
}

.pct75 {
    width: 75%;
}

.pct80 {
    width: 80%;
}

.pct90 {
    width: 90%;
}

.pct100 {
    width: 100%;
}

/* font-style */
.n {
    font-weight: normal;
    font-style: normal;
}

.b {
    font-weight: bold;
}

.i {
    font-style: italic;
}

/* text-align */
.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

.tl {
    text-align: left;
}

.tj {
    text-align: justify;
}

/* vertical-align */
.vm {
    vertical-align: middle;
}

.vtb {
    vertical-align: text-bottom;
}

.vb {
    vertical-align: bottom;
}

.vt {
    vertical-align: top;
}

.vn {
    vertical-align: -2px;
}

/* float */
.l {
    float: left;
}

.r {
    float: right;
}

/* clear */
.cl {
    clear: both;
}

/* position */
.rel {
    position: relative;
}

.abs {
    position: absolute;
}

/* ------------------- multiply CSS ------------------ */
/* 鍧楃姸鍏冪礌姘村钩灞呬腑 */
.auto {
    margin-left: auto;
    margin-right: auto;
}

/* 娓呴櫎娴� 鍔�*/
.fix {
    *zoom: 1;
}

.fix:after {
    display: table;
    content: '';
    clear: both;
}

/*寮规€у竷灞€*/
.dis_flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex; /* Safari */
    display: -moz-flex;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -moz-justify-content: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}